<template>
    <div class="myComment">
        <h4>评论区组件 ---- {{newid}}</h4>
        <hr>
        <textarea placeholder="请输入内容(最多120字)" cols="30" rows="3" v-model="msg"></textarea>
        <mt-button size="large" @click="postMsg" type="primary">发表评论</mt-button>
        <div class="itemList" v-for="(item,i) in itemList" :key="i">
            <div class="item-top">第{{i + 1}}楼 &nbsp;用户: {{item.user_name}} 发表时间: {{item.add_time | dataFormat}}</div>
            <div class="item-content">{{item.content}}</div>
        </div>
        <button class="loading" plain  @click="loadMore">加载更多</button>
    </div>
</template>

<script>
// 导入mint-ui
import {Toast }from "mint-ui"
export default {
    data(){
        return{
            page: 1, // 默认获取的页数是第一页
            itemList: [],
            msg: ''
        }
    },
    created() {
        this.getCommentByPage()
    },
    methods: {
        async getCommentByPage(){
            // 根据页数来获取评论的数据
            const {data} = await this.$http.get('/api/getcomments/'+ this.newid + '?pageindex=' + this.page)
            console.log(data);
            if(data.status === 0) 
            return (this.itemList = this.itemList.concat(data.message)) // concat(xxxx)方法进行数组的拼接，里面的参数是必须的
        },
        loadMore(){
            // 点击让页数加1
            this.page++
            this.getCommentByPage()
        },
        async postMsg(){
            // 如果用户没有填写内容，则阻止其发表言论
            if(this.msg.trim().length <= 0) return Toast("请输入内容")
            // 发表评论的逻辑
            const {data} = await this.$http.post('/api/postcomment/' + this.newid,{
                content: this.msg.trim()
            })
            if(data.status === 0){
                // 1.再次调用getCommentByPage()       这种方法虽然可以添加新的数据，但是会导致之前的数据清空
                // 获取评论之前，先把之前的评论清空
                // this.itemList = []
                // this.getCommentByPage()



                // 第二种方法
                // 为了防止重新调用getCommentByPage方式的时候，会把之前的数据清空
                // 我们客户端，手动拼接出一个 评论的时候，并把 这个评论对象， unshift到 itemList中
                this.itemList.unshift({
                    user_name: "匿名用户",
                    add_time: new Date(),
                    content: this.msg.trim()
                })
                this.msg = ''
            }
        }
    },
    props: ['newid']
}
</script>

<style lang="scss" scoped>
    .myComment{
        padding-bottom: 50px;
        textarea{
        font-size: 14px;
        margin: 0;
        }
        .fb{
            width: 100%;
            background-color: #26a2ff;
            color: #fff;
            font-size: 18px;
        }
        .itemList{
            padding-top: 5px;
            padding-bottom: 3px;
            font-size: 13px;
            font-weight: 400;
            .item-top{
                height: 20px;
                background-color: rgb(163, 162, 162);
                display: flex;
                align-items: center;
            }
            .item-content{
                padding-top: 3px;
                text-indent: 20px;
            }
        }
        .loading{
            width: 100%;
            color: red;
            border-style: solid;
            border-color: red;
            font-size: 18px;
        }
    }
</style>